{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-right"><a id="button-edit" data-toggle="tooltip" style="display:none;" title="{{ button_edit }}" class="btn btn-primary"><i class="fas fa-pencil-alt"></i></a> <a id="button-search" data-toggle="tooltip" title="{{ button_search }}" class="btn btn-info"><i class="fas fa-search"></i></a></div>
      <h1><i class="fas fa-search"></i> {{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    <div class="card">
      <div class="card-header"><i class="fas fa-list"></i> {{ heading_title }}</div>
      <div class="card-body">
        <div id="search-input">
          <form id="form">
            <h3>{{ text_date_search }}</h3>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="input-date-start">{{ entry_date_start }}</label>
              <div class="col-sm-10">
                <div class="input-group date">
                  <input type="text" name="date_start" value="{{ date_start }}" placeholder="{{ text_format }}: yy-mm-dd" id="input-date-start" class="form-control"/>
                  <div class="input-group-append">
                    <div class="input-group-text"><i class="fas fa-calendar"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="input-date-end">{{ entry_date_end }}</label>
              <div class="col-sm-10">
                <div class="input-group date">
                  <input type="text" name="date_end" value="{{ date_end }}" placeholder="{{ text_format }}: yy-mm-dd" class="form-control"/>
                  <div class="input-group-append">
                    <div class="input-group-text"><i class="fas fa-calendar"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <h3>{{ entry_transaction }}</h3>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_transaction_type }}</label>
              <div class="col-sm-10">
                <select name="transaction_class" class="form-control">
                  <option value="All">{{ entry_trans_all }}</option>
                  <option value="Sent">{{ entry_trans_sent }}</option>
                  <option value="Received">{{ entry_trans_received }}</option>
                  <option value="MassPay">{{ entry_trans_masspay }}</option>
                  <option value="MoneyRequest">{{ entry_trans_money_req }}</option>
                  <option value="FundsAdded">{{ entry_trans_funds_add }}</option>
                  <option value="FundsWithdrawn">{{ entry_trans_funds_with }}</option>
                  <option value="Referral">{{ entry_trans_referral }}</option>
                  <option value="Fee">{{ entry_trans_fee }}</option>
                  <option value="Subscription">{{ entry_trans_subscription }}</option>
                  <option value="Dividend">{{ entry_trans_dividend }}</option>
                  <option value="Billpay">{{ entry_trans_billpay }}</option>
                  <option value="Refund">{{ entry_trans_refund }}</option>
                  <option value="CurrencyConversions">{{ entry_trans_conv }}</option>
                  <option value="BalanceTransfer">{{ entry_trans_bal_trans }}</option>
                  <option value="Reversal">{{ entry_trans_reversal }}</option>
                  <option value="Shipping">{{ entry_trans_shipping }}</option>
                  <option value="BalanceAffecting">{{ entry_trans_bal_affect }}</option>
                  <option value="ECheck">{{ entry_trans_echeque }}</option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_email }} ({{ entry_email_buyer }})</label>
              <div class="col-sm-10">
                <input type="text" name="buyer_email" value="" placeholder="{{ entry_email_buyer }}" class="form-control"/>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_email }} ({{ entry_email_merchant }})</label>
              <div class="col-sm-10">
                <input type="text" name="merchant_email" value="" placeholder="{{ entry_email_merchant }}" class="form-control"/>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_receipt }}</label>
              <div class="col-sm-10">
                <input type="text" name="receipt_id" value="" placeholder="{{ entry_receipt }}" class="form-control"/>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_transaction_id }}</label>
              <div class="col-sm-10">
                <input type="text" name="transaction_id" value="" placeholder="{{ entry_transaction_id }}" class="form-control"/>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_invoice_no }}</label>
              <div class="col-sm-10">
                <input type="text" name="invoice_number" value="" placeholder="{{ entry_invoice_no }}" class="form-control"/>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_auction }}</label>
              <div class="col-sm-10">
                <input type="text" name="auction_item_number" value="" placeholder="{{ entry_auction }}" class="form-control"/>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_amount }}</label>
              <div class="col-sm-10">
                <input type="text" name="amount" value="" placeholder="{{ entry_amount }}" class="form-control"/>
                <br/>
                <select name="currency_code" class="form-control">
                  {% for code in currency_codes %}
                    <option {% if code == default_currency %} 'selected' {% endif %}>{{ code }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_recurring_id }}</label>
              <div class="col-sm-10">
                <input type="text" name="recurring_id" value="" placeholder="{{ entry_recurring_id }}" class="form-control"/>
              </div>
            </div>
            <h3>{{ text_buyer_info }}</h3>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_salutation }}</label>
              <div class="col-sm-10">
                <input type="text" name="name_salutation" value="" placeholder="{{ entry_salutation }}" class="form-control"/>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_firstname }}</label>
              <div class="col-sm-10">
                <input type="text" name="name_first" value="" placeholder="{{ entry_firstname }}" class="form-control"/>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_middlename }}</label>
              <div class="col-sm-10">
                <input type="text" name="name_middle" value="" placeholder="{{ entry_middlename }}" class="form-control"/>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_lastname }}</label>
              <div class="col-sm-10">
                <input type="text" name="name_last" value="" placeholder="{{ entry_lastname }}" class="form-control"/>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ entry_suffix }}</label>
              <div class="col-sm-10">
                <input type="text" name="name_suffix" value="" placeholder="{{ entry_suffix }}" class="form-control"/>
              </div>
            </div>
          </form>
        </div>
        <div id="search-box" style="display:none;">
          <div id="searching"><i class="fas fa-circle-notch fa-spin fa-lg"></i> {{ text_searching }}</div>
          <div style="display:none;" id="error" class="alert alert-danger"></div>
          <table id="search_results" style="display:none;" class="table table-striped table-bordered">
          </table>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript"><!--
  $('#button-search').on('click', function() {
	  var html = '';

	  $.ajax({
		  url: 'index.php?route=extension/payment/pp_express/doSearch&user_token={{ user_token }}',
		  type: 'POST',
		  dataType: 'json',
		  data: $('#form').serialize(),
		  beforeSend: function() {
			  $('#search-input').hide();
			  $('#search-box').show();
			  $('#button-search').hide();
			  $('#button-edit').show();
		  },
		  success: function(data) {
			  if (data.error == true) {
				  $('#searching').hide();
				  $('#error').html('<i class="fas fa-exclamation-circle"></i> ' + data.error_msg).fadeIn();
			  } else {
				  if (data.result != '') {
					  html += '<thead>';
					  html += '  <tr>';
					  html += '    <td class="left">{{ column_date }}</td>';
					  html += '    <td class="left">{{ column_type }}</td>';
					  html += '    <td class="left">{{ column_email }}</td>';
					  html += '    <td class="left">{{ column_name }}</td>';
					  html += '    <td class="left">{{ column_transid }}</td>';
					  html += '    <td class="left">{{ column_status }}</td>';
					  html += '    <td class="left">{{ column_currency }}</td>';
					  html += '    <td class="right">{{ column_amount }}</td>';
					  html += '    <td class="right">{{ column_fee }}</td>';
					  html += '    <td class="right">{{ column_netamt }}</td>';
					  html += '    <td class="center">{{ column_action }}</td>';
					  html += '  </tr>';
					  html += '</thead>';

					  $.each(data.result, function(k, v) {
						  if ("L_LONGMESSAGE" in v) {
							  $('#error').text(v.L_LONGMESSAGE).fadeIn();
						  } else {
							  if (!("L_EMAIL" in v)) {
								  v.L_EMAIL = '';
							  }

							  html += '<tr>';
							  html += '<td class="left">' + v.L_TIMESTAMP + '</td>';
							  html += '<td class="left">' + v.L_TYPE + '</td>';
							  html += '<td class="left">' + v.L_EMAIL + '</td>';
							  html += '<td class="left">' + v.L_NAME + '</td>';
							  html += '<td class="left">' + v.L_TRANSACTIONID + '</td>';
							  html += '<td class="left">' + v.L_STATUS + '</td>';
							  html += '<td class="left">' + v.L_CURRENCYCODE + '</td>';
							  html += '<td class="right">' + v.L_AMT + '</td>';
							  html += '<td class="right">' + v.L_FEEAMT + '</td>';
							  html += '<td class="right">' + v.L_NETAMT + '</td>';
							  html += '<td class="center">';
							  html += '<a href="{{ view_link }}&transaction_id=' + v.L_TRANSACTIONID + '">{{ text_view }}</a>';
							  html += '</td>';
							  html += '</tr>';
						  }
					  });

					  $('#searching').hide();
					  $('#search_results').append(html).fadeIn();
				  } else {
					  $('#searching').hide();
					  $('#error').html('<i class="fas fa-exclamation-circle"></i> {{ text_no_results }}').fadeIn();
				  }
			  }
		  }
	  });
  });

  $('#button-edit').on('click', function() {
	  $('#search-box').hide();
	  $('#search-input').show();
	  $('#button-edit').hide();
	  $('#button-search').show();
	  $('#searching').show();
	  $('#search_results').empty().hide();
	  $('#error').empty().hide();
  });

  $('.date').datetimepicker({
	  'format': 'YYYY-MM-DD',
	  'locale': '{{ datepicker }}',
	  'allowInputToggle': true
  });

  $('.time').datetimepicker({
	  'format': 'HH:mm',
	  'locale': '{{ datepicker }}',
	  'allowInputToggle': true
  });

  $('.datetime').datetimepicker({
	  'format': 'YYYY-MM-DD HH:mm',
	  'locale': '{{ datepicker }}',
	  'allowInputToggle': true
  });
  //--></script>
</div>
{{ footer }}